<template>
  <div class="cart">
    <navBar title="购物车" />

    <!-- 商品列表 -->
    <div class="shop-list">

      <!-- 滑块 -->
      <van-swipe-cell v-for="(item, i) in valid" :key="i">
        <!-- 商品 -->
        <van-card
          :num="item.cartNum"
          :price="item.truePrice"
          :desc="item.productInfo?.storeInfo"
          :title="item.productInfo?.storeName"
          :thumb="item.productInfo?.image"
        > 
          <template #thumb>
            <van-image
              width="100%"
              height="100%"
              :src="item.productInfo?.image"
            />

            <van-checkbox v-model="item.checked" class="checkbox" />
          </template>
          <template #tags>
            <van-tag plain type="danger">{{ item.productInfo?.attrInfo?.sku }}</van-tag>
          </template>
          <template #footer>
            <van-stepper v-model="item.cartNum" @change="stepper(item)" />
          </template>
        </van-card>
        <!-- 删除 -->
        <template #right>
          <van-button square text="删除" type="danger" @click="delCart(item.id)" class="delete-button" />
        </template>
      </van-swipe-cell>
      
    </div>

    <!-- 空空如也 -->
    <van-empty description="空空如也" v-show="!valid.length" />

    <!-- 提交栏 -->
    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  getCartList,
  cartNum,
  delCart,
} from '@/api/cart'

export default {
  data() {
    return {
      cartList: [], // 购物车列表
    }
  },
  created() {
    this.getCartList()
  },
  methods: {
    // 获取购物车列表
    async getCartList() {
      const { data } = await getCartList()
      data.valid?.forEach(item => item.checked = false);
      this.cartList = data
    },

    // 进步器
    async stepper(item) {
      const { cartNum: num, id } = item
      const res = await cartNum({
        number: num,
        id
      })
      if(res.status !== 200) return this.$toast.fail(res.msg)
    },

    // 删除购物车
    async delCart(id) {
      const res = await delCart({ ids: [id] })
      if(res.status === 200) {
        this.$toast.success('删除成功')
        this.getCartList()
        return
      }
      this.$toast.fail(res.msg)
      this.getCartList()
    },

    // 提交订单
    onSubmit() {
      const ids = this.valid?.filter(item => item.checked)?.map(item => item.id)
      if(!ids.length) return
      this.$router.push({
        path: `/confirmOrder`,
        query: { ids }
      })
    },
  },
  computed: {
    // 购物车列表
    valid() {
      return this.cartList?.valid || []
    },

    // 价格计算器
    price() {
      const { valid } = this.cartList
      return valid?.filter(item => item.checked)?.reduce((num, item) => {
        num += item.truePrice * item.cartNum
        return num
      }, 0) * 100 || 0
    },

    // 全选和全不选
    checked: {
      get() {
        const { valid } = this.cartList
        return valid?.every(item => item.checked) || false
      },
      set(val) {
        const { valid } = this.cartList
        valid?.forEach(item => item.checked = val)
      }
    }
  },
  filters: {
  },
}
</script>
<style lang="scss" scoped>
.cart {
  background-color: #fff;
  min-height: calc(99vh - 50px);
  text-align: left;
  .shop-list {
    .checkbox {
      position: absolute;
      top: 4px;
      left: 4px;
    }
    .delete-button {
      height: 100%;
    }
    .van-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
    .van-card__price {
      color: var(--red);
    }
  }
}
</style>